<template>
    <div class="my-redpack bg-white mx-[40rpx] mt-[20rpx] rounded-lg" v-if="content.enabled">
        <div
            class="redpack-title px-[30rpx] py-[20rpx] font-medium text-xl border-light border-solid border-0"
        >
            <div>我的红包</div>
        </div>
        <div class="flex flex-wrap pt-[10rpx] pb-[30rpx] text-xl">
            <div
                class="flex flex-col items-center w-1/2 pl-[16px] pr-[8px]"
            >
                <div class="h-[160rpx] redpack-content w-full flex items-center justify-center rounded-lg" style="position: relative;overflow: hidden;">
					{{ isLogin ? user.total_receive_amount : "0.00" }}
					<image :src="getImageUrl(content.left_icon)" mode="aspectFill" style="position: absolute;right: 0;bottom: 0;width: 40px;height: 28px;" />
				</div>
            </div>
            <div
                class="flex flex-col items-center w-1/2 pl-[8px] pr-[16px]"
                @click="handleClick({'path':'/packages/pages/redpack/receive'})"
            >
                <div class="h-[160rpx] redpack-content w-full flex items-center justify-center rounded-lg" style="position: relative;overflow: hidden;">
					领取记录
					<image :src="getImageUrl(content.right_icon)" mode="aspectFill" style="position: absolute;right: 0;bottom: 0;width: 40px;height: 28px;" />
				</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useAppStore } from '@/stores/app'
import { navigateTo } from '@/utils/util'

const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    },
    user: {
        type: Object,
        default: () => ({})
    },
    isLogin: {
        type: Boolean
    }
})
const { getImageUrl } = useAppStore()
const handleClick = (link: any) => {
    navigateTo(link)
}
</script>

<style lang="scss">
	.redpack-content {
		background: #fbfaff;
	}
</style>
